<template>
	<view class="page-container">
		<view class="text-area">
			<text>输入值：</text>
			<input type="text" v-model="title"
				style="color: red; background-color: #666; padding: 10rpx; border-radius: 5rpx; border: 1rpx solid #ccc;"
				@input="onInputChange" />
		</view>
		<view class="text-area">
			<text>回传值：</text>
			<input type="text" :value="callBackValue"
				style="color: yellow; background-color: #666; padding: 10rpx; border-radius: 5rpx; border: 1rpx solid #ccc;"
				readonly />
		</view>
		<comA :intent="title" ref="compA"></comA>
		<comB @callBackFun="callBack" ref="compB"></comB>
	</view>
</template>

<script>
	import comA from '../../../components/compA.vue'
	import comB from '../../../components/compB.vue'

	export default {
		components: {
			comA,
			comB
		},
		data() {
			return {
				title: 'Hello',
				callBackValue: ''
			}
		},
		methods: {
			onInputChange() {
				this.$nextTick(() => {
					if (this.$refs.compA) {
						this.$refs.compA.updateData(this.title);
					}
				});
			},
			callBack(value) {
				this.callBackValue = value
			}
		}
	}
</script>

<style scoped>
	.page-container {
		padding-top: 100rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.text-area {
		margin: 20rpx;
		padding: 15rpx;
		display: flex;
		align-items: center;
		background-color: white;
		border-radius: 10rpx;
		border: 1rpx solid #eee;
	}
</style>